<template>
  <div class="livelihoodPage">
    <div class="livelihoodLeft">
      <div class="header headerRed">人口总览</div>
      <div class="overview clearfix">
        <div
          v-for="item of overviewList"
          :key="item.id"
          class="overviewItem"
          :class="'overviewItem' + item.id"
        >
          <div class="overviewItemLeft">{{ item.rate }}</div>
          <div class="overviewItemRight">
            <p class="name">{{ item.name }}</p>
            <p class="number">{{ item.number }} <span>人</span></p>
          </div>
        </div>
      </div>
      <div class="header headerYellow">人口年龄分布统计</div>
      <div class="peopleChart">
        <dv-charts :option="peopleOption" style="width: 100%; height: 100%" />
      </div>
      <div class="header headerGreen">特殊人群统计</div>
      <div class="specialChart">
        <dv-capsule-chart
          :config="specialConfig"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
    <div class="livelihoodCenter"></div>
    <div class="livelihoodRight">
      <div class="header headerBlue">住房统计</div>
      <div class="houseDiv">
        <div class="chart">
          <dv-active-ring-chart
            :config="houseConfig"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="chartLegend">
          <ul>
            <li
              v-for="(item, index) of houseConfig.data"
              :key="index"
              class="legendItem"
            >
              <div class="color" :style="{ background: item.color }"></div>
              <div class="name">{{ item.name }}</div>
              <div class="rate">{{ item.value }} %</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="header headerBlue">预测预警</div>
      <div class="predictDiv">
        <div class="predictLeft">
          <div class="predictItem">
            <p class="name">{{ predictList[0].name }}</p>
            <p class="number">{{ predictList[0].number }}<span>件</span></p>
          </div>
          <div class="predictItem">
            <p class="name">{{ predictList[2].name }}</p>
            <p class="number">{{ predictList[2].number }}<span>件</span></p>
          </div>
        </div>
        <div class="predictRight">
          <div class="predictItem">
            <p class="name">{{ predictList[1].name }}</p>
            <p class="number">{{ predictList[1].number }}<span>件</span></p>
          </div>
          <div class="predictItem">
            <p class="name">{{ predictList[3].name }}</p>
            <p class="number">{{ predictList[3].number }}<span>件</span></p>
          </div>
        </div>
      </div>
      <div class="header headerRed">实时事件上报</div>
      <div class="eventDiv">
        <dv-scroll-board :config="eventConfig" style="width:100%;height:100%" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      overviewList: [
        { id: 1, name: "常住人口", number: "12452", rate: "52.5%" },
        { id: 2, name: "流动人口", number: "2347", rate: "22.3%" },
        { id: 3, name: "境外人口", number: "2345", rate: "22.3%" },
        { id: 4, name: "未落户人口", number: "5689", rate: "22.3%" },
      ],
      peopleOption: {
        title: {
          show: false,
        },
        legend: {
          data: [
            {
              name: "人口年龄",
              color: "#F88C0C",
            },
          ],
          textStyle: {
            fontSize: 10,
            fill: "#fff",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "10%",
          bottom: "30%",
        },
        xAxis: {
          data: ["5月", "6月", "7月", "8月", "9月", "10月", "11月"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          }
        },
        series: [
          {
            name: "人口年龄",
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            barWidth: '20%',
            gradient: {
              color: ["#F88C0C", "#FFB538"],
            },
          },
        ],
      },
      specialConfig: {
        data: [
          {
            name: "社会矫正",
            value: 167,
          },
          {
            name: "刑满释放",
            value: 123,
          },
          {
            name: "重点青少年",
            value: 98,
          },
          {
            name: "吸毒人员",
            value: 75,
          },
        ],
        colors: ["#00A2FF", "#00A2FF", "#00A2FF", "#00A2FF"],
        showValue: true,
      },
      houseConfig: {
        data: [
          {
            name: "自住",
            value: 48,
            color: "#2d8fe2",
          },
          {
            name: "部分出租",
            value: 24,
            color: "#06c2b4",
          },
          {
            name: "空置",
            value: 13,
            color: "#e0ce07",
          },
          {
            name: "出租",
            value: 6,
            color: "#656adf",
          },
          {
            name: "代租",
            value: 5,
            color: "#dc3fa9",
          },
          {
            name: "其他",
            value: 4,
            color: "#dfad03",
          },
        ],
        radius: 70,
        activeRadius: 80,
        lineWidth: 50,
        digitalFlopStyle: {
          fontSize: 16,
          fill: "#fff",
        },
        color: [
          "#2d8fe2",
          "#06c2b4",
          "#e0ce07",
          "#656adf",
          "#dc3fa9",
          "#dfad03",
        ],
      },
      predictList: [
        { id: 1, name: '重大矛盾纠纷', number: 1534 },
        { id: 2, name: '疑难矛盾纠纷', number: 4415 },
        { id: 3, name: '重点关注人', number: 3561 },
        { id: 4, name: '重点关注企业', number: 26 },
      ],
      eventConfig: {
        data: [
          ['针对培训、网课，教育退费等各类消费维权！专业律所帮您维权退费'],
          ['中公教育不退费'],
          ['私搭乱建'],
          ['请政府落实解决普惠金融灾难问题'],
          ['北京市海地区海淀街道光大锋尚社区对小区噪音不闻不问'],
          ['四年级体测成绩计入中考，相关缓考政策非常不公平'],
          ['房山小区要求安装公共充电桩'],
          ['车辆乱停放'],
          ['室内装修与学生在家上网课'],
          ['通州水恋晶城物业未经业主允许私设垃圾站'],
          ['北三环东路靠近静安庄西公交站的过街天桥为何没有按照承诺重建？'],
          ['尚林家园小区出现大量的漏水问题'],
        ],
        rowNum: 6,
        oddRowBGC: 'none',
        evenRowBGC: '#103661'
      }
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//livelihood.scss";
</style>
